<template>
  <div class="basic-main">
    <div class="top">
      <Balance
        :title="`职员管理`"
        :show-column="false"
        :show-title="true"
        :show-date="false"
        :show-search="false"
      >
        <template #header>
          <div class="header">
            <div class="button thumb" @click="add">新增职员 +</div>
          </div>
        </template>
      </Balance>
    </div>

    <div class="table">
      <Table
        :tdCss="{
          fontSize: '.07rem',
          padding: '.04rem',
        }"
        :borderSpacing="`0 .0729rem`"
        :lineCss="{
          height: `.2188rem`,
          background: '#f5f8fe',
        }"
        :add-field="{
            passwordOpen:false
        }"
        :dataSource="dataSource"
        :column="column"
        headerFamily="PuHuiMedium"
        headerFontSize="400"
      >
        <template #operation="{ row }">
          <div class="operation">
            <div class="button" @click="open">编辑</div>
            <Popconfirm placement="bottom">
               <div class="buttons">删除</div>
            </Popconfirm>
          </div>
        </template>
        <template #password="{ row }">
             <div class="pass" @mouseover="()=>row.passwordOpen = true" @mouseleave="()=>row.passwordOpen = false"> {{row.passwordOpen ?  row.password : `* * * * * *` }}</div>
        </template>
      </Table>
    </div>
  </div>

  <Confirm
    title="确定要账户注销吗"
    v-model:show="showConfirm"
    @confirm="loginOut"
  />

  <Dialog :title="`新增职员`" v-model:visible="showForm" width="30vw">
    <div class="info">
      <VeeForm
        :formData="formData"
        labelAlign="center"
        label-width="0.5688rem"
        :schema="schema"
        :labelCss="{
          fontSize: '.07rem',
        }"
        :input-height="`.18rem`"
        :requiredSize="`.05rem`"
        :initialValues="{}"
      >
        <template #button="{ validate, values }">
          <div class="button thumb" @click="() => submit(validate, values)">
            保存
          </div>
        </template>
      </VeeForm>
    </div>
  </Dialog>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import Balance from "@/components/Balance/index.vue";
import Confirm from "@/components/Confirm/index.vue";
import { GlobalStore } from "@/stores/index";
import { useRouter } from "vue-router";
import VeeForm from "@/components/VeeForm/index.vue";
import Dialog from "@/components/Dialog/index.vue";
import { FormData } from "@/components/VeeForm/interface";
import * as yup from "yup";
import { toast } from "vue3-toastify";
import Table, { Column } from "@/components/Table";
import { validateRule } from "@/utils/util";
import Popconfirm from "@/components/Popconfirm/index.vue";

interface List {
  name: string;
  phone: string;
  role_name: string;
  password: string;
}

const dataSource = ref<Array<List>>([
  {
    name: "林林林",
    phone: "17325764719",
    password: "123456",
    role_name: "普通职员",
  },
  {
    name: "林林林",
    phone: "17325764719",
    password: "123456",
    role_name: "普通职员",
  },
]);

const globalStore = GlobalStore();

const router = useRouter();

const showConfirm = ref<boolean>(false);

const showForm = ref<boolean>(false);

const open = ()=>{
    showForm.value = true;
}

const schema = yup.object().shape({
  name: yup.string().required("请输入职员姓名").max(20, "不得超过20字符"),
  role_id: yup.string().required("职员身份不为空"),
  phone: yup
    .string()
    .required("职员账号不为空")
    .matches(validateRule(`phone`), "请输入正确的手机号"),
  password: yup
    .string()
    .required("密码不为空")
    .min(5, "至少为5个字符")
    .max(20, "最多为20个字符"),
});

const formData = ref<FormData>({
  name: {
    type: "input",
    label: "职员姓名：",
    placeholder: "请输入职员名称",
    required: true,
  },
  role_id: {
    type: "select",
    required: true,
    label: "职员身份：",
    placeholder: "请输入职员身份",
    width: `.18rem`,
    height: `calc(.18rem + 2px)`,
    vBind: {
      size: `.06rem`,
      options: [
        { label: `普通职员普通职员`, value: 1 },
        {
          label: `管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员`,
          value: 2,
        },
        {
          label: `管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员`,
          value: 3,
        },
        {
          label: `管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员`,
          value: 4,
        },
        {
          label: `管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员`,
          value: 5,
        },
        {
          label: `管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员`,
          value: 6,
        },
        {
          label: `管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员`,
          value: 7,
        },
        {
          label: `管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员`,
          value: 8,
        },
        {
          label: `管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员`,
          value: 9,
        },
        {
          label: `管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员`,
          value: 10,
        },
        {
          label: `管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员`,
          value: 11,
        },
        {
          label: `管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员管理员`,
          value: 12,
        },
      ],
      reduce: (item: any) => item.value,
      selectTopCss: {
        paddingLeft: ".1rem",
      },
      optionCss: {
        "max-height": `calc(7 * 0.2rem)`,
      },
    },
  },
  phone: {
    type: "input",
    label: "职员账号：",
    placeholder: "请输入手机号码",
    required: true,
  },

  password: {
    type: "input",
    label: "职员密码：",
    required: true,
    placeholder: "请输入职员密码",
    vBind: {
      type: "password",
    },
  },
});

const loginOut = () => {
  globalStore.loginOut();
  router.push(`/home/index`);
};
const add = () => {
  showForm.value = true;
};

const column = ref<Array<Column>>([
  {
    title: "姓名",
    dataKey: "name",
    width: 200,
    align: "center",
  },
  { title: "账号", dataKey: "phone", width: 180, align: "center" },
  {
    title: "身份",
    dataKey: "role_name",
    width: 180,
    align: "center",
  },
  {
    title: "职员密码",
    dataKey: "password",
    width: 180,
    align: "center",
    slotName: "password",
  },
  {
    title: "操作",
    dataKey: "operation",
    width: 80,
    align: "center",
    slotName: "operation",
  },
]);

const submit = async (validate: any, values: any) => {
  const valid = (await validate()).valid;
  if (valid === false) return toast.error(`信息填写错误`);
  console.log(values);
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
